<!-- 需求列表  -->
<template>
  <pageHeader
    title="产品工艺路线版本"
    :breadCrumb="['工厂建模', '产品工艺路线管理', '历史版本']"
    show-back
  />
  <div class="table-info">
    <div class="search-box">
      <a-space>
        <!-- <a-select
          v-model="searchForm.state"
          placeholder="状态"
          :style="{ width: '220px' }"
          @change="Search"
        >
          <a-option :value="''"> 全部 </a-option>
          <a-option :value="1"> 启用 </a-option>
          <a-option :value="2"> 停用 </a-option>
        </a-select> -->
      </a-space>
      <a-space>
        <a-button type="outline" @click="resetting">
          <template #icon> <icon-refresh /> </template>重置
        </a-button>
        <HeaderSettingCopy
          v-model:headerValues="headerValues"
          :define-headers="ProductProcessRouteHerders.herders"
          :type="101"
        />
      </a-space>
    </div>
    <tableTurn :tableData="getDemandAll" :args="args" ref="tableRef">
      <a-table-column :width="70" align="center" title="序号">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        v-for="header in headerValues"
        :key="header.name"
        :width="header.width || 200"
        :title="header.name"
        :fixed="header.fixed"
        align="center"
      >
        <template #cell="{ record }">
          <template v-if="header.name === '状态'">
            <a-typography-text type="danger" v-if="record.state === 1">
              启用
            </a-typography-text>
            <a-typography-text type="success" v-if="record.state === 2">
              停用
            </a-typography-text>
          </template>
          <template v-if="header.name === '产品编码'">
            {{ record.management?.number }}
          </template>
          <template v-if="header.name === '产品名称'">
            {{ record.management?.name }}
          </template>
          <template v-if="header.name === '规格型号'">
            {{ record.management?.spec }}
          </template>
          <template v-if="header.name === '基本单位'">
            {{ record.management?.unitData?.name }}
          </template>
          <template v-else>
            {{ record[header.code] }}
          </template>
        </template>
      </a-table-column>
      <a-table-column :width="90" fixed="right" title="是否启用" align="center">
        <template #cell="{ record }">
          <a-space>
            <a-switch
              @click="switchClick(record)"
              :model-value="record.history"
              :checked-value="1"
              :unchecked-value="2"
            />
          </a-space>
        </template>
      </a-table-column>
      <a-table-column :width="200" fixed="right" title="操作" align="center">
        <template #cell="{ record }">
          <a-space>
            <a-link @click="history(record.id)"> 新增版本 </a-link>
            <a-link @click="edit(record.id, record.productName)">修改</a-link>
            <a-popconfirm
              v-if="record.state !== 2 && record.history != 1"
              content="是否删除该数据?"
              type="error"
              @ok="del(record.id)"
            >
              <a-link status="danger"> 删除 </a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import {
    GetProductProcessRoutePage,
    DelProductProcessRoute,
    CheckProductBom,
    EditProductRoadHistoryState,
  } from '@/api/FactoryModeling';

  import { ProductProcessRouteHerders } from '@/utils/tableHerders';
  import { Message } from '@arco-design/web-vue';

  const router = useRouter();
  const route = useRoute();

  const edit = (id: number, productName: string) => {
    router.push({
      name: 'ProductProcessRouteDetails',
      query: { saveId: id, productName },
    });
  };

  let history = (id: number) => {
    router.push({
      name: 'ProductProcessRouteDetails',
      query: { historyId: id },
    });
  };

  let searchForm = reactive<any>({});
  // 表格配置
  const args = reactive({
    stripe: false,
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });
  const tableRef = ref();

  // 获取需求列表
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetProductProcessRoutePage({
        ...page,
        ...searchForm,
        productId: route.query.productId,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      return Promise.resolve();
    }
  };

  const Search = () => {
    tableRef.value.loadData();
  };

  const resetting = () => {
    for (const key in searchForm) {
      delete searchForm[key];
    }
    tableRef.value.loadData();
  };
  let switchClick = async ({ history, id, productId }: any) => {
    if (history === 1) return Message.error('请通过启用其他历史版本关闭');
    let res = await GetProductProcessRoutePage({
      page: 1,
      size: -1,
      productId: route.query.productId,
    });
    let { state } = res.content.map(({ history }: any) => history === 2);
    if (state === 2) return Message.error('启用版本正在使用中不可更换');
    await EditProductRoadHistoryState({ id, productId });
    Search();
  };
  const del = async (id: number) => {
    await DelProductProcessRoute({ id });
    tableRef.value.loadData();
  };
  let headerValues = ref<any[]>([]);
</script>

<style scoped lang="less">
  .table-info {
    padding: 10px;

    .search-box {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
    }
  }

  .use-state {
    display: flex;
    justify-content: center;
    text-align: center;
    .cycle {
      position: relative;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      content: '';
      display: inline-block;
      top: 3px;
      right: 10px;
    }
  }

  .greyColor {
    color: #c9cdd4;
  }
  .greyColor-cycle {
    background-color: #c9cdd4;
  }

  // 审核中、执行中
  .blueColor {
    color: #156dff;
  }
  .blueColor-cycle {
    background-color: #156dff;
  }

  // 已通过
  .greenColor {
    color: #31c273;
  }
  .greenColor-cycle {
    background-color: #31c273;
  }

  // 不通过
  .redColor {
    color: #f53f3f;
  }
  .redColor-cycle {
    background-color: #f53f3f;
  }
</style>
